import React, { useState, useEffect } from 'react';
import { connect } from 'dva';
import { Tree, Spin, Input, Menu, Dropdown, Modal, Empty } from 'antd';
import request from '@/utils/request';
import ScrollBar from '@/components/ScrollBar';
import IconFont from '@/components/IconFont';
import styles from './index.less';
import QueryCatalog from './components/QueryCatalog';
import QueryRule from './components/QueryRule';
import QueryScheme from './components/QueryScheme';
import EditRule from './components/EditRule';

const { TreeNode } = Tree;
const { Search } = Input;
const { confirm } = Modal;

const namespace = 'ruleConfig';

function TreeMenu(props) {
  // 初始化加载loading
  const [loading, setLoading] = useState(false);
  // 组织树数据
  const [TreeData, setTreeData] = useState([]);
  // 选中点击的值
  const [selectedKeysArr, setSelectedKeysArr] = useState(['']);
  // 展示的树节点
  const [expandedKeys, setExpandedKeys] = useState([]);
  // 是否自动展开父节点
  const [autoExpandParent, setAutoExpandParent] = useState(true);
  // 搜索
  const [searchValue, setSearchValue] = useState('');

  // 各模态框显示隐藏控制 ====== 开始 ========
  // 查看、修改、新增规则
  const [queryRuleVisable, setQueryRuleVisable] = useState(false);
  const [queryRuleStatus, setQueryRuleStatus] = useState('');
  // 编辑规则关系、编辑子规则关系
  const [editRuleVisable, setEditRuleVisable] = useState(false);
  const [editRuleStatus, setEditRuleStatus] = useState('');
  // 查看、修改、新增目录
  const [queryCatalogVisable, setQueryCatalogVisable] = useState(false);
  const [queryCatalogStatus, setQueryCatalogStatus] = useState('');
  // 查看、修改、新增方案
  const [querySchemeVisable, setQuerySchemeVisable] = useState(false);
  const [querySchemeStatus, setQuerySchemeStatus] = useState('');
  // =========== 结束 ===============

  // 通过dva来传递选中节点的id,对右侧数据进行查找
  const savePassId = params => {
    const { dispatch } = props;
    dispatch({
      type: `${namespace}/savePassId`,
      payload: params,
    });
  };

  // 初始化获取接口的Tree集合
  const queryTreeData = () => {
    setLoading(true);
    request('/oc/RuleCfgController/showRuleTree.do', {
      method: 'POST',
    })
      .then(res => {
        if (res.rule_tree.length > 0) {
          setTreeData(res.rule_tree);
        }
      })
      .always(() => setLoading(false));
  };

  useEffect(() => {
    queryTreeData();
  }, []);

  // 选中节点传递数据到右侧模块
  const passId = id => {
    // console.log(id);
    savePassId(id);
  };
  // 选中节点
  const selectTreeNode = selectedKeys => {
    /* eslint-disable */
    selectedKeys.length > 0
      ? setSelectedKeysArr(selectedKeys)
      : setSelectedKeysArr(selectedKeysArr);
    /* eslint-enable */
    passId(selectedKeys.length > 0 ? selectedKeys.toString() : selectedKeysArr.toString());
  };

  /**
   * 子接节点操作项 type="rule" ：
   * 查看规则
   * 修改规则
   * 删除规则
   * 失效规则
   * 新增子规则
   * 编辑规则关系
   * 编辑子规则关系
   */

  // 查看、修改规则、新增子规则
  const queryRule = (event, item, status) => {
    setQueryRuleVisable(true);
    setQueryRuleStatus(status);
    setSelectedKeysArr([`${item.id}`]);
  };
  // 删除规则
  const deleteRule = (event, item) => {
    setSelectedKeysArr([`${item.id}`]);
    confirm({
      content: '你确定要删除此规则？',
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
    });
  };
  // 失效规则
  const loseRule = (event, item) => {
    setSelectedKeysArr([`${item.id}`]);
    confirm({
      content: '你确定要失效此规则？',
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
    });
  };
  // 编辑规则关系、编辑子规则关系
  const editRule = (event, item) => {
    setEditRuleVisable(true);
    setSelectedKeysArr([`${item.id}`]);
  };

  /**
   * 规则管理新增目录操作项 type="root"
   */
  // 新增目录套用queryCatalog

  /**
   * 目录级操作项 type="directory"
   * 查看目录
   * 修改目录
   * 删除目录
   * 新增方案
   */
  // 查看、修改目录
  const queryCatalog = (event, item, status) => {
    setQueryCatalogVisable(true);
    setQueryCatalogStatus(status);
    setSelectedKeysArr([`${item.id}`]);
  };
  // 删除目录
  const deleteCatalog = (event, item) => {
    setSelectedKeysArr([`${item.id}`]);
    confirm({
      content: '你确定要删除此节点目录？',
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
    });
  };
  // 新增方案调 queryScheme

  /**
   * 目录级操作项 type="plan"
   * 查看方案
   * 修改方案
   * 删除方案
   * 新增规则
   * 编辑规则关系
   */

  // 查看、修改方案
  const queryScheme = (event, item, status) => {
    setQuerySchemeVisable(true);
    setQuerySchemeStatus(status);
    setSelectedKeysArr([`${item.id}`]);
  };
  // 删除方案
  const deleteScheme = (event, item) => {
    setSelectedKeysArr([`${item.id}`]);
    confirm({
      content: '你确定要删除此节点方案？',
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
    });
  };
  // 新增规则 、编辑规则关系复用子节点操作项

  // 遍历递归集合数据，渲染组织树
  const renderTreeNode = TreeArr => {
    if (TreeArr.length > 0) {
      return TreeArr.map(item => {
        const index = item.name.indexOf(searchValue);
        const beforeStr = item.name.substr(0, index);
        const afterStr = item.name.substr(index + searchValue.length);
        let title = '';
        /**
         * 不同层级操作状态不同
         */
        if (item.isLeaf) {
          title = (
            <Dropdown
              overlay={
                <Menu className={styles.min_width}>
                  <Menu.Item>
                    <a
                      onClick={event => {
                        queryRule(event, item, 'detail');
                      }}
                    >
                      查看规则
                    </a>
                  </Menu.Item>
                  <Menu.Item>
                    <a
                      onClick={event => {
                        queryRule(event, item, 'edit');
                      }}
                    >
                      修改规则
                    </a>
                  </Menu.Item>
                  <Menu.Item>
                    <a
                      onClick={event => {
                        deleteRule(event, item);
                      }}
                    >
                      删除规则
                    </a>
                  </Menu.Item>
                  <Menu.Item>
                    <a
                      onClick={event => {
                        loseRule(event, item);
                      }}
                    >
                      失效规则
                    </a>
                  </Menu.Item>
                  <Menu.Item>
                    <a
                      onClick={event => {
                        queryRule(event, item, 'add');
                      }}
                    >
                      新增子规则
                    </a>
                  </Menu.Item>
                  <Menu.Item>
                    <a
                      onClick={event => {
                        editRule(event, item);
                      }}
                    >
                      编辑规则关系
                    </a>
                  </Menu.Item>
                  <Menu.Item>
                    <a
                      onClick={event => {
                        editRule(event, item);
                      }}
                    >
                      编辑子规则关系
                    </a>
                  </Menu.Item>
                </Menu>
              }
              trigger={['contextMenu']}
            >
              {index > -1 ? (
                <span>
                  {beforeStr}
                  <span style={{ color: '#f50' }}>{searchValue}</span>
                  {afterStr}
                </span>
              ) : (
                <span>{item.name}</span>
              )}
            </Dropdown>
          );
        } else {
          /* eslint-disable */
          if (item.type && item.type === 'root') {
            title = (
              <Dropdown
                overlay={
                  <Menu className={styles.min_width}>
                    <Menu.Item>
                      <a
                        onClick={event => {
                          queryCatalog(event, item, 'add');
                        }}
                      >
                        新增目录
                      </a>
                    </Menu.Item>
                  </Menu>
                }
                trigger={['contextMenu']}
              >
                {index > -1 ? (
                  <span>
                    {beforeStr}
                    <span style={{ color: '#f50' }}>{searchValue}</span>
                    {afterStr}
                  </span>
                ) : (
                  <span>{item.name}</span>
                )}
              </Dropdown>
            );
          } else if (item.type && item.type === 'directory') {
            title = (
              <Dropdown
                overlay={
                  <Menu className={styles.min_width}>
                    <Menu.Item>
                      <a
                        onClick={event => {
                          queryCatalog(event, item, 'detail');
                        }}
                      >
                        查看目录
                      </a>
                    </Menu.Item>
                    <Menu.Item>
                      <a
                        onClick={event => {
                          queryCatalog(event, item, 'edit');
                        }}
                      >
                        修改目录
                      </a>
                    </Menu.Item>
                    <Menu.Item>
                      <a
                        onClick={event => {
                          deleteCatalog(event, item);
                        }}
                      >
                        删除目录
                      </a>
                    </Menu.Item>
                    <Menu.Item>
                      <a
                        onClick={event => {
                          queryScheme(event, item, 'add');
                        }}
                      >
                        新增方案
                      </a>
                    </Menu.Item>
                  </Menu>
                }
                trigger={['contextMenu']}
              >
                {index > -1 ? (
                  <span>
                    {beforeStr}
                    <span style={{ color: '#f50' }}>{searchValue}</span>
                    {afterStr}
                  </span>
                ) : (
                  <span>{item.name}</span>
                )}
              </Dropdown>
            );
          } else if (item.type && item.type === 'plan') {
            title = (
              <Dropdown
                overlay={
                  <Menu className={styles.min_width}>
                    <Menu.Item>
                      <a
                        onClick={event => {
                          queryScheme(event, item, 'detail');
                        }}
                      >
                        查看方案
                      </a>
                    </Menu.Item>
                    <Menu.Item>
                      <a
                        onClick={event => {
                          queryScheme(event, item, 'edit');
                        }}
                      >
                        修改方案
                      </a>
                    </Menu.Item>
                    <Menu.Item>
                      <a
                        onClick={event => {
                          deleteScheme(event, item);
                        }}
                      >
                        删除方案
                      </a>
                    </Menu.Item>
                    <Menu.Item>
                      <a
                        onClick={event => {
                          queryRule(event, item, 'add');
                        }}
                      >
                        新增规则
                      </a>
                    </Menu.Item>
                    <Menu.Item>
                      <a
                        onClick={event => {
                          editRule(event, item);
                        }}
                      >
                        编辑规则关系
                      </a>
                    </Menu.Item>
                  </Menu>
                }
                trigger={['contextMenu']}
              >
                {index > -1 ? (
                  <span>
                    {beforeStr}
                    <span style={{ color: '#f50' }}>{searchValue}</span>
                    {afterStr}
                  </span>
                ) : (
                  <span>{item.name}</span>
                )}
              </Dropdown>
            );
          }
          /* eslint-enable */
        }
        return (
          <TreeNode
            icon={({ expanded, isLeaf }) => (
              /* eslint-disable */
              <IconFont
                type={
                  expanded
                    ? 'icon-folder-open'
                    : isLeaf
                    ? item.icon
                      ? `icon-${item.icon}`
                      : 'icon-file'
                    : 'icon-folder'
                }
                // style={{ fontSize: 16 }}
              />
              /* eslint-enable */
            )}
            title={title}
            key={`${item.id},${item.type}`}
            isLeaf={item.isLeaf}
            // 往组织树挂一个detaRef 可供外部获取选中的整个对象数据
            dataRef={item}
          >
            {item.children ? renderTreeNode(item.children) : null}
          </TreeNode>
        );
      });
    }
  };

  // const onSearch = value => {
  //   // 为空搜索
  //   if (!value) {
  //     setExpandedKeys(['']);
  //     setAutoExpandParent(false);
  //     setSearchValue('');
  //     return;
  //   }
  //   // 当前选中项的父节点
  //   const parentArr = [];
  //   // 遍历获取整颗组织树满足的父节点存放parentArr
  //   const getAllparentId = parentId => {
  //     TreeData.filter(item => {
  //       if (item.menuId === parentId) {
  //         parentArr.push(item.menuId);
  //         if (item.parMenuId !== 0) {
  //           getAllparentId(item.parMenuId);
  //         }
  //       }
  //     });
  //   };
  //   TreeData.map(item => {
  //     if (item.menuName.indexOf(value) > -1) {
  //       getAllparentId(item.parMenuId);
  //     }
  //   });
  //   const strParentArr = [];
  //   parentArr.map(item => {
  //     strParentArr.push(`${item}`);
  //   });

  //   setExpandedKeys(strParentArr);
  //   setAutoExpandParent(true);
  //   setSearchValue(value);
  // };

  const onExpand = expandedKeys => {
    setExpandedKeys(expandedKeys);
    setAutoExpandParent(false);
  };

  return (
    <div className={styles.menu}>
      <div className={styles.menu_search}>
        <Search style={{ marginBottom: 8 }} placeholder="搜索关键字" />
      </div>
      <ScrollBar autoHide autoHeight autoHeightMax={props.height - 100}>
        <Spin spinning={loading}>
          {TreeData.length > 0 ? (
            <Tree
              showIcon
              expandAction="false"
              className={styles.menu_tree}
              onSelect={selectTreeNode}
              selectedKeys={selectedKeysArr}
              onExpand={onExpand}
              expandedKeys={expandedKeys}
              autoExpandParent={autoExpandParent}
            >
              {renderTreeNode(TreeData)}
            </Tree>
          ) : (
            <Empty />
          )}
        </Spin>
      </ScrollBar>
      {/* 新增、修改、编辑目录弹窗 */}
      {queryCatalogVisable ? (
        <QueryCatalog
          visiable={queryCatalogVisable}
          close={() => {
            setQueryCatalogVisable(false);
          }}
          status={queryCatalogStatus}
        />
      ) : null}
      {/* 查看、修改、新增规则弹窗 */}
      {queryRuleVisable ? (
        <QueryRule
          visiable={queryRuleVisable}
          close={() => {
            setQueryRuleVisable(false);
          }}
          status={queryRuleStatus}
        />
      ) : null}
      {/* 查看、修改、新增方案弹窗 */}
      {querySchemeVisable ? (
        <QueryScheme
          visiable={querySchemeVisable}
          close={() => {
            setQuerySchemeVisable(false);
          }}
          status={querySchemeStatus}
        />
      ) : null}
      {/* 编辑规则关系、编辑子规则关系弹窗 */}
      {editRuleVisable ? (
        <EditRule
          visiable={editRuleVisable}
          close={() => {
            setEditRuleVisable(false);
          }}
        />
      ) : null}
    </div>
  );
}

export default connect(() => ({}))(TreeMenu);
